<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->

<template>
  <div class="min-h-screen bg-gray-50">
    <div class="mx-auto px-6 mt-5">
      <div class="search-bar">
        <!-- 搜索 -->
        <el-form ref="queryFormRef" :model="queryParams" :inline="true">
          <el-form-item label="工号查询" prop="employeeId">
            <el-input
              v-noSpace
              v-model="queryParams.employeeId"
              placeholder="请输入工号查询"
              clearable
              class="!w-[192px]"
              @keyup.enter="getInfo()"
            />
          </el-form-item>

          <el-form-item label="选择部门" prop="deptName">
            <el-select
              v-model="queryParams.deptName"
              placeholder="请选择选择部门"
              class="!w-[192px]"
              filterable
              clearable
              @change="getInfo"
            >
              <el-option
                v-for="item in depRes"
                :key="item.deptId"
                :label="item.name"
                :value="item.name"
              />
            </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" icon="search" @click="getInfo">搜索</el-button>
            <el-button icon="refresh" @click="departmentsync" v-hasPerm="'sys:employeeInfo:async'">
              数据同步
            </el-button>
          </el-form-item>
        </el-form>

        <!-- 生产单列表 -->
      </div>
      <!-- 头部搜索区域 -->

      <!-- 表格区域 -->
      <el-table
        v-loading="loading"
        show-overflow-tooltip
        :tooltip-formatter="tableRowFormatter"
        :data="userRes"
        style="width: 100%"
        :header-cell-style="{ background: '#f5f7fa' }"
        stripe
      >
        <el-table-column label="基本信息">
          <template #default="{ row }">
            <div class="flex items-center gap-3">
              <span>{{ row.employeeName }}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="employeeId" label="工号" />
        <el-table-column prop="jobNumber" label="职位" />
        <el-table-column label="联系方式">
          <template #default="{ row }">
            <div v-if="row.mobile" class="flex flex-col gap-1">
              <div class="flex items-center gap-1">
                <el-icon><Phone /></el-icon>
                {{ row.mobile }}
              </div>
              <div v-if="row.email" class="flex items-center gap-1">
                <el-icon><Message /></el-icon>
                {{ row.email }}
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="workPlace" label="办公地点" />
        <el-table-column prop="deptName" label="所在部门" />
        <el-table-column prop="remark" label="备注" width="120" />
      </el-table>

      <!-- 分页区域 -->
      <div class="flex justify-center py-6">
        <el-pagination
          v-model:current-page="queryParams.pageNum"
          v-model:page-size="queryParams.pageSize"
          :page-sizes="[1, 5, 10, 20]"
          :total="total"
          layout="total, sizes, prev, pager, next, jumper"
          class="!rounded-button"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { Search, Refresh, Phone, Message } from "@element-plus/icons-vue";
import organizationalAPI, { emPageQuery } from "@/api/basicData/organizational";
import { tableRowFormatter } from "@/utils/index";

const queryParams = reactive<emPageQuery>({
  pageNum: 1,
  pageSize: 10,
});
const loading = ref(false);
const total = ref(0);
const depRes = ref<{ name: string; deptId: number }[]>([]);
const userRes = ref([]);
const depFormat = (depList: any) => {
  let data = depList
    .map((item: any) => {
      return depRes.value.find((items: any) => items.deptId == item)?.name;
    })
    .filter((item: any) => item !== undefined);
  return data.join(",");
};
const getDepList = () => {
  organizationalAPI.getDepartmentList(queryParams).then((data: any) => {
    console.log(data);
    depRes.value = data.list.map((item: any) => {
      return {
        name: item.name,
        deptId: item.deptId,
      };
    });
    console.log(depRes);
    // console.log(userRes);
    // getInfo();
    // console.log(depRes);
  });
};
const queryFormRef = ref(ElForm);
const departmentsync = () => {
  queryFormRef.value.resetFields();
  // console.log(queryFormRef);
  queryParams.pageNum = 1;
  loading.value = true;
  organizationalAPI.departmentsync().then((data: any) => {
    loading.value = false;
    getInfo();
  });
};
const getInfo = () => {
  loading.value = true;
  organizationalAPI.getEmployeeList(queryParams).then((data: any) => {
    userRes.value = data.list;
    total.value = data.total;
    loading.value = false;
    // userRes.value.forEach((item: any) => {
    //   item.depName = depFormat(item.deptIdList);
    // });
  });
};
const handleSizeChange = (val: number) => {
  console.log(`每页 ${val} 条`);
  getInfo();
};
const handleCurrentChange = (val: number) => {
  console.log(`当前页: ${val}`);
  getInfo();
};
const departments = [
  { label: "产品设计部", value: "product" },
  { label: "前端研发部", value: "frontend" },
  { label: "后端研发部", value: "backend" },
  { label: "运营部", value: "operation" },
];

const tableData = [
  {
    name: "赵雪莉",
    empId: "EMP10086",
    position: "产品设计师",
    phone: "138****8888",
    email: "zhaoxueli@company.com",
    email2: "zhaoxueli@company.org",
    location: "上海市浦东新区",
    joinDate: "2023-06-15",
    department: "产品设计部",
    position2: "高级产品经理",
    leaveDate: "-",
    status: "在职",
    avatar: "https://ai-public.mastergo.com/ai/img_res/7f954ec4c26deb91fe8b7788e932ed89.jpg",
  },
  {
    name: "林志远",
    empId: "EMP10087",
    position: "前端工程师",
    phone: "137****9999",
    email: "linzhiyuan@company.com",
    email2: "linzhiyuan@company.org",
    location: "北京市朝阳区",
    joinDate: "2023-08-01",
    department: "前端研发部",
    position2: "技术组长",
    leaveDate: "2024-01-15",
    status: "已离职",
    avatar: "https://ai-public.mastergo.com/ai/img_res/8eadc74841f49e6ea03a777ac95ab3dc.jpg",
  },
];
onMounted(() => {
  getInfo();
  getDepList();
  // getInfo();
});
</script>

<style lang="scss" scoped>
@use "@/styles/css/public" as *;

.el-input :deep(.el-input__wrapper) {
  box-shadow: 0 0 0 1px #e5e7eb inset;
}

.el-input :deep(.el-input__wrapper.is-focus) {
  box-shadow: 0 0 0 1px #409eff inset;
}

.el-select :deep(.el-input__wrapper) {
  box-shadow: 0 0 0 1px #e5e7eb inset;
}

.el-select :deep(.el-input__wrapper.is-focus) {
  box-shadow: 0 0 0 1px #409eff inset;
}
</style>
